import { Component } from 'react'
import { Form, Input, Upload, Button, message } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import request, { baseURL } from '../api/request'

// npm i react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjs
import { convertToRaw } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import draftToHtml from 'draftjs-to-html'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

export default class AddProductForm extends Component {
  state = {
    editorHtml: '', // 富文本编辑器内容
  }

  // 成功提交表单
  onFinish = ({ title, price, upload }) => {
    const params = {
      title,
      price,
      pic: upload[0].response.path,
      detail: this.state.editorHtml
    }
    console.log(params)
    request.post('/products', params).then(res => {
      message.info('添加商品成功')
      this.props.close()
      this.props.getTableData()
    }).catch(console.error)
  }

  // 提交表单失败
  onFinishFailed = () => {

  }

  // 上传文件校验
  beforeUpload = ({ type }) => {
    // 若类型不合, 返回 LIST_IGNORE 阻止组件显示该文件
    if (type !== 'image/png' && type !== 'image/jpeg') {
      message.error('请上传 jpg, jpeg 或 png 图片')
      return Upload.LIST_IGNORE
    }
  }

  // 取得上传文件信息
  normFile = e => {
    if (Array.isArray(e)) return e
    return e && e.fileList.slice(-1) // 只取最后一张图片
  }

  onEditorStateChange = editorState => {
    const editorHtml = draftToHtml(convertToRaw(editorState.getCurrentContent()))
    this.setState({ editorHtml })
  }

  render () {
    // 设置 htmlType="submit" 后, 按钮才能触发提交
    return (
      <Form
        onFinish={this.onFinish}
        onFinishFailed={this.onFinishFailed}
      >
        <Form.Item
          label="商品名称"
          name="title"
          rules={
            [{ required: true, message: '请输入商品名称' }]
          }
        >
          <Input/>
        </Form.Item>
        <Form.Item
          label="商品价格"
          name="price"
          rules={
            [{ required: true, message: '请输入商品价格' }]
          }
        >
          <Input/>
        </Form.Item>
        <Form.Item
          label="商品图片"
          name="upload"
          rules={
            [{ required: true, message: '请上传商品图片' }]
          }
          valuePropName="fileList"
          getValueFromEvent={this.normFile}
        >
          <Upload
            action={`${baseURL}/products/upload`}
            listType="picture"
            beforeUpload={this.beforeUpload}
          >
            <Button icon={<UploadOutlined />}>上传图片</Button>
          </Upload>
        </Form.Item>
        <Form.Item
          label="商品详情"
          name="detail"
          rules={
            [{ required: true, message: '请输入商品详情' }]
          }
        >
          <Editor
            wrapperClassName="wrapper-class"
            editorClassName="editor-class"
            toolbarClassName="toolbar-class"
            onEditorStateChange={this.onEditorStateChange}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            添加商品
          </Button>
        </Form.Item>
      </Form>
    )
  }
}
